<template>
	<view class="wrap">

		<view class="search flex">
			<input type="text" value="" placeholder="搜索预约单号/客户姓名/手机号码" class="input" />
			<view class="btn">预约</view>
		</view>
		<view class="content-box">
			<view class="content" v-for="(item,index) in list" :key="index">
				<view class="title flex mr-top">
					<view class="title-l">ID:94586768477684765</view>
					<view class="title-r">精品</view>
				</view>
				<view class="name mr-top">测试礼物</view>
				<view class="js flex mr-top">
					<view class="js-l">测试动画</view>
					<view class="js-r">追思会</view>
				</view>
				<view class="time flex mr-top">
					<view class="iconfont icon-shijian"></view>
					<view class="time-text">2024-09-15 10:00-14:00</view>
				</view>
				<view class="mark">私人订制</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const list = ref([1, 2, 3, 4, 9, 0, 88])
</script>

<style lang="scss" scoped>
	.wrap {}


	.search {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 20rpx;
		border-bottom: 1rpx solid #dedede;
		box-sizing: border-box;
		z-index: 99999;

		.input {
			width: 88%;
			height: 88rpx;
			font-size: 26rpx;
			padding-left: 10rpx;
			line-height: 88rpx;
			background-color: #dedede;
			box-sizing: border-box;
		}

		.btn {
			width: 100rpx;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 26rpx;
			text-align: center;
			color: #fff;
			background-color: $base-bg;
		}
	}

	.content-box {
		padding: 140rpx 20rpx 100rpx 20rpx;
	}

	.content {
		position: relative;
		padding: 0 20rpx;
		font-size: 24rpx;
		color: $base-color;
		border-bottom: 1rpx solid #dedede;

		&:last-child {
			border-bottom: none;
		}

		.mr-top {
			padding: 10rpx 0;
		}

		.title-r {
			margin-left: 20rpx;
			padding: 0 20rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			font-size: 24rpx;
			color: green;
			background-color: #fff;
			border: 1rpx solid green;
			border-radius: 10rpx;
		}

		.js-r {
			margin-left: 20rpx;
			padding: 0 20rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			font-size: 24rpx;
			color: $act-color;
			background-color: #fff;
			border: 1rpx solid $act-color;
			border-radius: 10rpx;
		}

		.mark {
			position: absolute;
			right: 0;
			top: 80rpx;
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 24rpx;
			color: #fff;
			background-color: $act-color;
		}

		.iconfont {
			margin-right: 10rpx;
			font-size: 32rpx;
		}
	}
</style>